#{extends 'main.html' /}
#{set title:'Give2Get - Service Detail' /}

<div id="service_detail">

    <div id="service_information" class="white">
    <p id="username_text" style="line-height: 40px;">${service.title}</p>


    <!-- Service Detail -->
    <div id="detail">
        <div id="service_information_1">

                    <table width="100%">
                        <tr class="">
                            <td valign="top"><b>Description</b></td>
                            <td>${service.description}</td>
                        </tr>
                        <tr class="">
                            <td><b>Creation Date</b></td>
                            <td>${service.created}</td>
                        </tr>
                        <tr class="">
                            <td><b>Status</b></td>
                            <td>${service.status}</td>
                        </tr>
                        <tr class="">
                            <td><b>Provider</b></td>
                            <td><a href="/user/${service.providerId}">${service.providerFullName}</a></td>
                        </tr>
                        <tr class="">
                            <td><b>City</b></td>
                            <td>${service.sehirName}</a></td>
                        </tr>
                        <tr class="">
                            <td><b>District</b></td>
                            <td>${service.ilceName}</a></td>
                        </tr>
                        <td><b>Neighborhood</b></td>
                            <td>${service.semtName}</a></td>
                        </tr>
                    </table>
        </div>
        <div id="service_information_2">
            <span><b>Start Date - </b></span>
                            <span>${service.startDate}</span>
                            <br/>
                            <br/>
                            <span><b>End Date - </b></span>
                            <span>${service.endDate}</span>
                            <br/>
                            <br/>
                            <span><b>Weekly Plan - </b></span>
                            <span>${service.fromDay} - ${service.toDay}</span>
                            <br/>
                            <br/>
                            <span><b>Daily Plan - </b></span>
                            <span>${service.fromTime} - ${service.toTime}</span>
                            <br/>
                            <br/>
                            <span><b>View Count - </b></span>
                            <span>${service.viewCount}</span>
                            <br/>
                            <br/>
                            <span>

                        <div id="service_tags">
                            <p class="table_title">Tags</p>
                            <!-- Comment List -->
                            #{if tags}
                            <table width="100%" id="tagList">        

                                #{list tags, as:'tag'}
                                <tr class="${}">
                                    <td>
                                        <table id="one_tag" width="100%">
                                            <tr>
                                                <td class="tag_text">${tag.text}</td>
                                            </tr>
                                            <tr>
                                                <td class="tag_owner">Posted by <a href="/user/${tag.ownerId}">${tag.ownerFullName}</a> at ${tag.created}</td>
                                            </tr>
                                        </table>
                                    </td>                               
                                </tr>
                                #{/list}

                            </table>
                            #{/if}
                            #{ifnot tags}
                            <p>Not Tagged</p>
                            #{/ifnot}
                        </div>

                            #{if userId != service.providerId}
                                #{form @Services.request(service?.id, service?.providerId, service?.title)}
                                <input type="image" src="@{'/public/images/request.png'}" name="request" value="request"/>
                                #{/form}
                            #{/if}
                            #{else}
                            <a href="/editService/${service.id}"><img src="@{'/public/images/edit.png'}"></a>
                            #{/else}
                            </span>



            </div>

    </div>


    <!-- New Comment Post -->
    <div id="post_comment">

        <!-- Title & Add Comment-->
        <!--<table width=100% id="table_comments_header">
            <tr>
                <td>
                    <p id="title_service_comments">${comments.size() > 1 ? comments.size() + ' ' + "Comments" : ''}</p>
                </td>
                <td style="text-align:right;">
                    #{form @newComment(service?.id, service?.title)}
                    <input type="submit" value="Add Comment" />
                    #{/form}
                </td>
            </tr>
        </table>-->




        <br/>
        <br/>
        <p class="table_title">People Talking About This Service</p>
        <!-- Comment List -->
        #{if comments}
        <table width="100%" id="commentList">        

            #{list comments, as:'comment'}
            <tr class="${}">
                <td>
                    <table id="one_comment" width="100%">
                        <tr>
                            <td class="comment_text">${comment.text}</td>
                        </tr>
                        <tr>
                            <td class="comment_owner">Posted by <a href="/user/${comment.ownerId}">${comment.ownerFullName}</a> at ${comment.created}</td>
                        </tr>
                    </table>
                </td>                               
            </tr>
            #{/list}

        </table>
        #{/if}
        #{ifnot comments}
        <p>No Comments</p>
        #{/ifnot}


        <br/>
        <br/>
        <p class="table_title">Say Something About This Service</p>


        <div class="commentEntryPanel">

            <div class="signupelement">                
                <textarea name="comment" id="comment" class="comment_area">${flash.content}</textarea>
            </div>


            <div class="signupelement">
                <input type="submit" value="Say It" onclick="javascript:postComment()"/>
            </div>            

        </div>

        <br/>


    </div>    


</div>
</div>


<script type="text/javascript">

    function postComment() {

        var comment     = $("#comment").val();
        var serviceId   = ${service.id};

        $("#comment").val('');


        $.getJSON("@{Services.postComment()}", {serviceId : serviceId , content : comment}, function(comments) {

            $("#commentList tr").remove();

            var index = 0;

            $.each(comments, function(id, name) {

                $("#commentList").append("<tr class='" + comments[index].OrEven + "'><td><table width='100%'><tr><td width='80%' class='comment_text'>" + comments[index].text + "</td></tr><tr><td class='comment_date'>" + comments[index].created + "</td><td class='comment_owner'><a href='/user/" +  comments[index].ownerId + "'>" + comments[index].ownerFullName + "</a></td></tr></td></tr>");

                index++;

            });                       
        });
    }

</script>
